import * as React from 'react'

import { Text, Button, Card, createUseStyles } from '@v-uik/base'

const Chart = () => (
  <svg
    width="176"
    height="176"
    viewBox="0 0 176 176"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M55.5589 69.2037C56.1135 68.6277 56.9562 68.0943 58.0869 67.6037C59.2389 67.113 60.6575 66.8677 62.3429 66.8677C64.5402 66.9103 66.2149 67.433 67.3669 68.4357C68.5189 69.4383 69.0949 70.7823 69.0949 72.4677C69.0949 73.8543 68.7535 75.017 68.0709 75.9557C67.3882 76.873 66.4069 77.5343 65.1269 77.9397C66.6629 78.1743 67.8575 78.7503 68.7109 79.6677C69.5855 80.585 70.0229 81.8117 70.0229 83.3477C70.0229 84.265 69.8522 85.1183 69.5109 85.9077C69.1909 86.6757 68.7002 87.3477 68.0389 87.9237C67.3775 88.4997 66.5455 88.9583 65.5429 89.2997C64.5402 89.6197 63.3775 89.7903 62.0549 89.8117C61.2229 89.8117 60.4442 89.737 59.7189 89.5877C59.0149 89.4597 58.3855 89.289 57.8309 89.0757C57.2762 88.841 56.7962 88.585 56.3909 88.3077C55.9855 88.0303 55.6549 87.7637 55.3989 87.5077V84.1157C56.0815 85.0117 56.9989 85.737 58.1509 86.2917C59.3029 86.8463 60.5829 87.113 61.9909 87.0917C63.7402 87.0703 65.0629 86.7077 65.9589 86.0037C66.8762 85.2783 67.3349 84.329 67.3349 83.1557C67.3349 81.9183 66.9082 80.969 66.0549 80.3077C65.2229 79.625 63.8682 79.2837 61.9909 79.2837H59.3029V77.1077H61.3189C62.9829 77.1077 64.2415 76.777 65.0949 76.1157C65.9695 75.433 66.4069 74.473 66.4069 73.2357C66.4069 72.0197 66.0015 71.113 65.1909 70.5157C64.4015 69.897 63.2815 69.5877 61.8309 69.5877C60.4442 69.609 59.2282 69.865 58.1829 70.3557C57.1589 70.8463 56.2842 71.5397 55.5589 72.4357V69.2037ZM73.8751 84.3397C74.5578 85.193 75.4751 85.8757 76.6271 86.3877C77.7791 86.8783 78.9951 87.113 80.2751 87.0917C81.9604 87.0917 83.2191 86.6757 84.0511 85.8437C84.9044 84.9903 85.3311 83.8597 85.3311 82.4517C85.3311 81.001 84.8084 79.913 83.7631 79.1877C82.7178 78.4623 81.3204 78.0997 79.5711 78.0997C78.5898 78.0997 77.6724 78.1743 76.8191 78.3237C75.9871 78.4517 75.2831 78.6117 74.7071 78.8037L75.4751 67.1557H87.0591V69.7797H77.8111L77.3631 76.0197C77.5338 75.977 77.7471 75.945 78.0031 75.9237C78.2804 75.881 78.5578 75.849 78.8351 75.8277C79.1338 75.785 79.4218 75.753 79.6991 75.7317C79.9978 75.7103 80.2751 75.6997 80.5311 75.6997C82.9631 75.6997 84.8404 76.3077 86.1631 77.5237C87.4858 78.7397 88.1471 80.3823 88.1471 82.4517C88.1471 83.6463 87.9551 84.7023 87.5711 85.6197C87.2084 86.5157 86.6751 87.2837 85.9711 87.9237C85.2884 88.5423 84.4671 89.0117 83.5071 89.3317C82.5471 89.6517 81.4911 89.8117 80.3391 89.8117C79.5498 89.8117 78.8138 89.737 78.1311 89.5877C77.4484 89.4597 76.8298 89.289 76.2751 89.0757C75.7418 88.8623 75.2724 88.6277 74.8671 88.3717C74.4618 88.1157 74.1311 87.8703 73.8751 87.6357V84.3397ZM104.946 89.5557H102.066V67.1557H104.946V77.0757H108.562L117.266 67.1557H120.914L111.314 77.9717L122.162 89.5557H118.386L108.722 79.3157H104.946V89.5557Z"
      fill="black"
      fillOpacity="0.9"
    />
    <path
      d="M68.8556 111.556L65.7116 103.156H66.8876L69.4796 110.176L71.9276 103.156H73.0556L69.9476 111.556H68.8556ZM74.6197 111.556V105.196H75.6157V111.556H74.6197ZM74.4877 103.276C74.4877 102.88 74.7157 102.652 75.1117 102.652C75.5077 102.652 75.7357 102.88 75.7357 103.276C75.7357 103.672 75.5077 103.9 75.1117 103.9C74.7157 103.9 74.4877 103.672 74.4877 103.276ZM81.9605 105.448V106.636C81.4925 106.24 81.0005 105.964 80.2205 105.964C79.2725 105.964 78.8765 106.204 78.8765 106.816C78.8765 108.28 82.2365 107.332 82.2365 109.672C82.2365 111.016 81.4325 111.688 79.8965 111.688C78.9005 111.688 78.2405 111.496 77.7125 111.184V109.948C78.2045 110.44 79.0925 110.788 79.8965 110.788C80.8085 110.788 81.2405 110.416 81.2405 109.72C81.2405 108.28 77.8805 109.18 77.8805 106.888C77.8805 105.772 78.4685 105.076 80.1725 105.076C81.0485 105.076 81.5885 105.268 81.9605 105.448ZM84.3345 111.556V105.196H85.3305V111.556H84.3345ZM84.2025 103.276C84.2025 102.88 84.4305 102.652 84.8265 102.652C85.2225 102.652 85.4505 102.88 85.4505 103.276C85.4505 103.672 85.2225 103.9 84.8265 103.9C84.4305 103.9 84.2025 103.672 84.2025 103.276ZM88.3033 109.588V106.084H86.9473V105.196H88.3033V103.888L89.2993 103.516V105.196H91.5913V106.084H89.2993V109.552C89.2993 110.476 89.6473 110.776 90.3793 110.776C91.0873 110.776 91.4833 110.608 91.8313 110.392V111.316C91.5673 111.508 90.9433 111.676 90.3073 111.676C88.9753 111.676 88.3033 111.112 88.3033 109.588ZM92.9689 108.352C92.9689 106.156 94.2409 105.076 96.0649 105.076C97.7929 105.076 98.9089 106.084 98.9089 108.388C98.9089 110.776 97.5889 111.688 95.9329 111.688C94.0369 111.688 92.9689 110.452 92.9689 108.352ZM93.9649 108.352V108.388C93.9649 109.9 94.6849 110.788 96.0169 110.788C97.2049 110.788 97.9129 110.068 97.9129 108.388V108.352C97.9129 106.744 97.2049 105.964 95.9329 105.964C94.6729 105.964 93.9649 106.792 93.9649 108.352ZM100.784 111.556V105.196H101.672L101.732 106.048C102.008 105.436 102.728 105.064 103.46 105.064C103.7 105.064 103.88 105.076 104.024 105.112V106.24C103.796 106.06 103.508 105.952 103.172 105.952C102.188 105.952 101.78 106.6 101.78 107.68V111.556H100.784ZM109.476 105.448V106.636C109.008 106.24 108.516 105.964 107.736 105.964C106.788 105.964 106.392 106.204 106.392 106.816C106.392 108.28 109.752 107.332 109.752 109.672C109.752 111.016 108.948 111.688 107.412 111.688C106.416 111.688 105.756 111.496 105.228 111.184V109.948C105.72 110.44 106.608 110.788 107.412 110.788C108.324 110.788 108.756 110.416 108.756 109.72C108.756 108.28 105.396 109.18 105.396 106.888C105.396 105.772 105.984 105.076 107.688 105.076C108.564 105.076 109.104 105.268 109.476 105.448Z"
      fill="black"
      fillOpacity="0.9"
    />
    <path
      d="M88 1C103.962 1 119.616 5.39116 133.249 13.6928C146.882 21.9945 157.968 33.8867 165.294 48.0677C172.621 62.2487 175.904 78.172 174.786 94.0944C173.668 110.017 168.191 125.325 158.955 138.343C149.719 151.361 137.079 161.587 122.42 167.902C107.76 174.217 91.6461 176.377 75.8411 174.146C60.036 171.915 45.1493 165.38 32.8104 155.254C20.4714 145.129 11.1559 131.804 5.88341 116.738L19.0221 112.14C23.451 124.795 31.276 135.988 41.6407 144.493C52.0054 152.999 64.5103 158.489 77.7865 160.363C91.0627 162.237 104.599 160.422 116.912 155.117C129.226 149.813 139.844 141.223 147.602 130.288C155.361 119.353 159.961 106.494 160.9 93.1193C161.84 79.7444 159.081 66.3689 152.927 54.4569C146.773 42.5448 137.461 32.5554 126.009 25.582C114.557 18.6086 101.408 14.92 88 14.92V1Z"
      fill="#0FB5AE"
      stroke="#F8F8F8"
      strokeWidth="0.887755"
    />
    <path
      d="M5.88934 116.755C-0.848482 97.5147 -0.615898 76.5194 6.5465 57.4332C13.7089 38.3471 27.3462 22.3821 45.0784 12.3248L51.9459 24.4328C37.0508 32.881 25.5955 46.2915 19.5791 62.3239C13.5627 78.3563 13.3673 95.9923 19.0271 112.154L5.88934 116.755Z"
      fill="#4046CA"
      stroke="#F8F8F8"
      strokeWidth="0.887755"
    />
    <path
      d="M45.0843 12.3215C58.1686 4.90163 72.9531 1.0009 87.9948 1L87.9956 14.92C75.3606 14.9208 62.9416 18.1974 51.9508 24.43L45.0843 12.3215Z"
      fill="#F68511"
      stroke="#F8F8F8"
      strokeWidth="0.887755"
    />
  </svg>
)

const useStyles = createUseStyles((theme) => ({
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  button: {
    padding: 8,
    minWidth: 40,
  },
  body: {
    display: 'flex',
    gap: 20,
    alignItems: 'center',
  },
  subtitle: {
    fontWeight: 600,
    marginBottom: 6,
  },
  legendColor: {
    borderRadius: 2,
    width: 10,
    height: 10,
  },
  legendText: {
    color: theme.sys.color.onBackgroundMedium,
  },
  legendItem: {
    display: 'flex',
    gap: 8,
    marginBottom: 6,
    alignItems: 'center',

    '&:last-child': {
      marginBottom: 0,
    },
  },
}))

const Icon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z"
      fill="currentColor"
    />
  </svg>
)

const data = [
  {
    color: '#0FB5AE',
    label: 'Windows',
  },
  {
    color: '#4046CA',
    label: 'macOS',
  },
  {
    color: '#F68511',
    label: 'Other',
  },
]

export const ChartCard = () => {
  const styles = useStyles()

  return (
    <div style={{ width: 382, margin: 'auto' }}>
      <Card
        kind="container"
        classes={{ headerText: styles.header, body: styles.body }}
        header={
          <>
            <Text kind="headline5">Title</Text>
            <Button className={styles.button} kind="ghost" color="secondary">
              <Icon />
            </Button>
          </>
        }
      >
        <Chart />
        <div>
          <Text kind="bodyMd" className={styles.subtitle}>
            Operating system
          </Text>
          {data.map(({ label, color }) => (
            <div key={label} className={styles.legendItem}>
              <div
                className={styles.legendColor}
                style={{
                  backgroundColor: color,
                }}
              />
              <Text kind="bodyMd" className={styles.legendText}>
                {label}
              </Text>
            </div>
          ))}
        </div>
      </Card>
    </div>
  )
}
